page {
    background: #f4f4f4;
}
.course-detail {
    &.has-footer,
    &.has-player {
        padding-bottom: 120rpx;
    }
    &.has-footer.has-player {
        padding-bottom: 240rpx;
    }
    .banner {
        background-color: #fff;
        .banner-pic {
            display: block;
            height: 392rpx;
            width: 100%;
            // background-color: gray;
        }
        .course-info {
            padding: 32rpx 32rpx 20rpx;
            display: flex;
            align-items: flex-end;
            view {
                flex-grow: 1;
                flex-shrink: 1;
            }
            share-btn {
                flex-grow: 0;
                flex-shrink: 0;
            }
            trial-btn {
                flex-grow: 0;
                flex-shrink: 0;
            }
        }
        .course-title {
            font-size: 34rpx;
            line-height: 44rpx;
            color: fade(#000, 87%);
            font-weight: 500;
            word-break: break-all;
        }
        .course-desc {
            margin-top: 8rpx;
            font-size: 26rpx;
            line-height: 32rpx;
            color: fade(#000,54%);
        }
        .course-price {
            margin-top: 24rpx;
            line-height: 50rpx;
            display: flex;
            align-items: center;
            .discount-price {
                margin-left: 8rpx;
                font-size: 36rpx;
                color: #ff5e4b;
                &::before {
                    content: "￥";
                }
            }
            .original-price {
                margin-left: 16rpx;
                font-size: 28rpx;
                line-height: 40rpx;
                color: fade(#000,30%);
                text-decoration: line-through;
            }
            .discount-tip {
                padding: 0 10rpx;
                border-radius: 4rpx;
                font-size: 22rpx;
                line-height: 32rpx;
                height: 32rpx;
                color: #fff;
                background-color: #ff5e4b;
            }
        }
    }
    .zh-tabs {
        text-align: center;
    }
    .course-intros {
        padding: 20rpx 0;
    }
    .course-catelog {
        padding: 20rpx;
        .course-item {
            display: block;
            margin-bottom: 8rpx;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .subscribe-time-limit {
        margin-top: 16rpx;
        font-size: 26rpx;
        line-height: 36rpx;
        height: 36rpx;
        color: fade(#000,54%);
        text-align: center;
    }
    .learners {
        margin-top: 20rpx;
        padding: 24rpx 32rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        image {
            flex-grow: 0;
            width: 68rpx;
            height: 68rpx;
            margin-right: 20rpx;
            border-radius: 50%;
            // background: gray;
        }
        .number {
            font-size: 28rpx;
            color: fade(#000,54%);
            flex-grow: 1;
            text-align: right;
        }
        .dot {
            background: #e8e8e8;
            height: 8rpx;
            width: 8rpx;
            border-radius: 50%;
            margin-right: 12rpx;
        }
    }
}
